import React, {Component} from 'react';

class App extends Component {
    state = {
        count: 0,
        selectVal: 1
    };
    selectChange = (e) => {
        console.log(Number(e.target.value));
        const selectVal = Number(e.target.value);
        this.setState({selectVal});
    };
    increment = () => {
        const number = this.state.selectVal;
        const count = this.state.count + number;
        this.setState({count});
    };
    decrement = () => {
        const number = this.state.selectVal;
        const count = this.state.count - number;
        this.setState({count});
    };
    incrementIfOdd = () => {
        const number = this.state.selectVal;
        if (this.state.count % 2 !== 0) {
            const count = this.state.count + number;
            this.setState({count});
        }
    };
    incrementAsync = () => {
        const number = this.state.selectVal;
        setTimeout(() => {
            const count = this.state.count + number;
            this.setState({count});
        }, 1000);
    };

    render() {
        const {count} = this.state;
        return (
            <div className="App">
                <p>click {count} times</p>
                <div>
                    <select onChange={this.selectChange}>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>&nbsp;
                    <button onClick={this.increment}>+</button>
                    &nbsp;
                    <button onClick={this.decrement}>-</button>
                    &nbsp;
                    <button onClick={this.incrementIfOdd}>increment if odd</button>
                    &nbsp;
                    <button onClick={this.incrementAsync}>increment async</button>
                </div>
            </div>
        );
    }
}

export default App;
